<template>
    <div id="code-scoped" ref="code" v-html="code"></div>
</template>
<script>
export default {
    props: ['url', 'index'],
    data () {
        return {
            code: ''
        }
    },
    async mounted () {
        let md = await import(`./${this.url}`)
        let index = this.index || 0
        // eslint-disable-next-line
        this.code = marked((md.default || md)).split('<!-- split block -->')[index]
        this.$nextTick(() => {
            let code = this.$refs.code.getElementsByTagName('code')
            Array.from(code).forEach(function (pre) {
                // eslint-disable-next-line
                Prism.highlightElement(pre, false, function () {
                    console.log('实现代码高亮完成')
                })
            })
        })
    },
    methods: {
        highlightElement (ele) {
            let code = ele.getElementsByTagName('code')
            Array.from(code).forEach(function (pre) {
                // eslint-disable-next-line
                Prism.highlightElement(pre, false, function () {
                    console.log('实现代码高亮完成')
                })
            })
        }
    }
}
</script>
<style lang="scss">
#code-scoped {
    h1 {
        line-height: 50px;
        text-decoration: underline;
        color: #000;
    }
    h2 {
        line-height: 40px;
        text-decoration: underline;
        color: #000;
    }
    h3 {
        line-height: 30px;
        margin-top: 10px;
        text-decoration: underline;
        color: #000;
    }
    blockquote {
        margin: 0px;
        background: #eee;
        padding: 10px;
        color: #000;
    }
    ol {
        padding-left: 15px;
        list-style: decimal;
        li {
            line-height: 18px;
            list-style: decimal;
        }
    }
    strong {
        color: #000;
        padding: 0 2px;
    }
}
</style>
